import { useContext } from 'react'
import TodoContext from '../TodoContext'
// 3.1 为 TodoList 组件，指定 props 的类型
// type Props = {
//   // list: {
//   //   id: number
//   //   text: string
//   //   done: boolean
//   // }[]

//   onToggleTodo: (id: number) => void

//   onDeleteTodo: (id: number) => void
// }

const TodoList = () => {
  const { todos, onToggleTodo, onDeleteTodo } = useContext(TodoContext)

  // 监听输入框 change 事件的改变
  const onChange = (id: number) => {
    onToggleTodo(id)
  }

  return (
    <ul className="todo-list">
      {/* 编辑样式：editing  已完成样式：completed */}

      {todos.map((todo) => (
        <li key={todo.id} className={todo.done ? 'completed' : ''}>
          <div className="view">
            <input className="toggle" type="checkbox" checked={todo.done} onChange={() => onChange(todo.id)} />
            <label>{todo.text}</label>
            <button className="destroy" onClick={() => onDeleteTodo(todo.id)} />
          </div>
          <input className="edit" defaultValue="Create a TodoMVC template" />
        </li>
      ))}
    </ul>
  )
}

export default TodoList
